<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<head>
<link rel="stylesheet" type="text/css" href="<%=basePath%>images/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>images/themes/icon.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="<%=basePath%>js/jquery-1.8.0.min.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=basePath%>js/jquery.easyui.min.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=basePath%>js/main.js" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
		initTable();
	});
	//初始化list表
	function initTable(){
		$('#listGrid').datagrid({
			title:'用户列表',
			fit:true,
			//singleSelect:true,
			url:'<%=basePath%>user/list',
			columns:[[
				{checkbox:true},
				{field:'id',title:'id',width:100,align:'center',hidden:true},
				{field:'name',title:'用户名',width:150,align:'center'},
				{field:'mail',title:'邮箱',width:200,align:'center'},
				{field:'phone',title:'电话',width:150,align:'center'}
			]],
			pagination:true,
			//rownumbers:true,
			toolbar:'#tb'
		});
	}
	
	//添加
	function add(){
		$('#editDialog').dialog({
			width:300,
			height: 200,
			resizable:true,
			title:'添加',
			modal:true
		});
		openDialog('editDialog');
		$("#pswTr").toggle(true);
	}
	//关闭编辑框
	function closeEdit(id){
		closeDialog(id);
	}
	//删除
	function del(){
		var selections = $('#listGrid').datagrid('getSelections');
		if(selections.length>0){
			var ids=[];
			var names=[];
			for(var i=0;i<selections.length;i++){
				ids.push(selections[i].id);
				names.push(selections[i].name)
			}
			$.messager.confirm('删除', '确定删除 '+names.join(',')+' 吗?', function(r){
				if (r){
					$.ajax({
						"url":"<%=basePath%>user/delete",
						"dataType":"json",
						"type":"post",
						"data":{
							"id":ids.join(",")
						},
						"success":function(data){
							if(!data.success){
								$.messager.alert("错误",data.code,"error");
							}else{
								$('#listGrid').datagrid('reload');
								$.messager.alert("成功","保存成功","info");
								closeEdit();
							}
						},
						"error":function(xhr,err,exp){
							window.top.location="<%=basePath%>error";
						}
					});
				}
			});
			
		}else{
			$.messager.alert("警告","请选择要删除的记录","warning");
		}
	}
	//更新
	function update(){
		var selections = $('#listGrid').datagrid('getSelections');
		if(selections.length==1){
			$('#editDialog').dialog({
				width:300,
				height: 200,
				resizable:true,
				title:'修改',
				modal:true
			});
			
			openDialog('editDialog');
			$('#editDialog form').form('load',selections[0]);
			$("#psw").val(0);
			$("#pswTr").toggle(false);
		}else{
			$.messager.alert("警告","请选择一条记录记录","warning");
		}
	}
	//搜索
	function query(){
		$('#listGrid').datagrid('load',{
			"name": $("#nameq").val(),
			"mail":$("#mailq").val(),
			"phone":$("#phoneq").val()
		});
	}
	//保存
	function save(){
		if(!$('#form').form('validate')){
			return;
		}
		
		var data  = $("#form").serialize();
		
		$.messager.confirm('添加', '确定提交吗?', function(r){
			if (r){
				$.ajax({
					"url":"<%=basePath%>user/save",
					"dataType":"json",
					"type":"post",
					"data":data,
					"success":function(data){
						if(!data.success){
							$.messager.alert("错误",data.code,"error");
						}else{
							$('#listGrid').datagrid('reload');
							closeEdit('editDialog');
						}
					},
					"error":function(xhr,err,exp){
						window.top.location="<%=basePath%>error";
					}
				});
			}
		});
	}
	
	//用户授权
	function userRight(){
		var selections = $('#listGrid').datagrid('getSelections');
		if(selections.length==1){
			$('#userRight').dialog({
				width:350,
				height: 400,
				resizable:true,
				title:'修改',
				modal:true
			});
			openDialog('userRight');
			initRightBox(selections[0].id);
			$("#userId").val(selections[0].id);
		}else{
			$.messager.alert("警告","请选择一条记录记录","warning");
		}
	}
	
	function initRightBox(id){
		$("#listLeft").empty();
		$("#listRight").empty();
		$.ajax({
			"url":"<%=basePath%>user/right/"+id,
			"dataType":"json",
			"type":"post",
			"success":function(data){
				if(!data.success){
					$.messager.alert("错误",data.code,"error");
				}else{
					var rightList = data.right;
					for(var i=0;i<rightList.length;i++){
						if(rightList[i].user_id==null){
							$("#listLeft").append("<option value='"+rightList[i].id+"'>"+rightList[i].rolename+"</option>")
						}else{
							$("#listRight").append("<option value='"+rightList[i].id+"'>"+rightList[i].rolename+"</option>")
						}
					}
					isEmpty();
				}
			},
			"error":function(xhr,err,exp){
				window.top.location="<%=basePath%>error";
			}
		});
	}
	
	//用户 权限保存
	function right_save(){
		$.messager.confirm('添加', '确定提交吗?', function(r){
			if (r){
				var select = $("#listRight option");
				var roleId=[];
				for(var i=0;i<select.length;i++){
					roleId.push($(select[i]).val());
				}
				$.ajax({
					"url":"<%=basePath%>user/right/save",
					"dataType":"json",
					"type":"post",
					"data":{
						"roleId":roleId.join(","),
						"userId":$("#userId").val()
					},
					"success":function(data){
						if(!data.success){
							$.messager.alert("错误",data.code,"error");
						}else{
							$('#listGrid').datagrid('reload');
							$.messager.alert("成功","保存成功","info");
							closeEdit('userRight');
						}
					},
					"error":function(xhr,err,exp){
						window.top.location="<%=basePath%>error";
					}
				});
			}
		});
	}
	
	//打开重置密码对话框
	function resetPsw(){
		var selections = $('#listGrid').datagrid('getSelections');
		if(selections.length==1){
			$('#pswDialog').dialog({
				width:300,
				height: 200,
				resizable:true,
				title:'修改',
				modal:true
			});
			openDialog("pswDialog");
			$("#psw_id").val(selections[0].id);
		}else{
			$.messager.alert("警告","请选择一条记录记录","warning");
		}
	}
	
	//重置密码
	function save_psw(){
		if(!$("#psw_form").form('validate')){
			return;
		}
		if($("#re_psw").val()!=$("#re_psw_confirm").val()){
			$.messager.alert("警告","两次输入的密码不一致","warning");
			return;
		}
		$.ajax({
			"url":"<%=basePath%>user/resetPsw",
			"dataType":"json",
			"type":"post",
			"data":{
				"id":$("#psw_id").val(),
				"psw":$("#re_psw").val()
			},
			"success":function(data){
				if(!data.success){
					$.messager.alert("错误",data.code,"error");
				}else{
					$('#listGrid').datagrid('reload');
					$.messager.alert("成功","修改成功","info");
					closeEdit('pswDialog');
				}
			},
			"error":function(xhr,err,exp){
				window.top.location="<%=basePath%>error";
			}
		});
	}
</script>
</head>
<body>
<shiro:hasPermission name="/user">
	<table id="listGrid"></table>
	<div id="tb" style="padding:5px;height:auto">  
	    <div style="margin-bottom:5px">  
			<table cellpadding="0" cellspacing="0">
				<tr>			  
					<td>用户名:<input id="nameq" type="text"/></td>
					<td>邮箱:<input id="mailq" type="text"/></td>
					<td>电话:<input id="phoneq" type="text"/></td>
					<td><a id="search"  class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="query()">搜索</a></td>
				</tr>
			</table>
	    </div>  
		<div>    
			<table  cellpadding="0" cellspacing="0" >
				<tr>
					<td>
						<shiro:hasPermission name="/user/save">
						<a id="add" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="add()">添加</a>
						<a id="update" class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="update()">更新</a>
						</shiro:hasPermission>
						<shiro:hasPermission name="/user/delete">
						<a id="delet" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" onclick="del()">删除</a>
						</shiro:hasPermission>
						<shiro:hasPermission name="/user/right">
						<a id="right" class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="userRight()">用户授权</a>
						</shiro:hasPermission>
						<a id="resetPsw" class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="resetPsw()">重置密码</a>
					</td>
				</tr>
			</table>
		</div>
	</div>
	<shiro:hasPermission name="/user/save">
	<!-- 编辑 DIALOG ###################################################################### -->
	<div id="editDialog" class="easyui-dialog" data-options="buttons:'#bb',closed:true" style="padding: 5px;">
		<form id="form" action="#">
			<input type="hidden" id="id" name="id"/>
			<table>
				<tr>
					<td>用户名:</td>
					<td>
					<input class="easyui-validatebox" id="name" name="name" data-options="required:true">
					<font color="red">*</font>
					</td>
				</tr>
				<tr id="pswTr">
					<td>密码:</td>
					<td>
					<input class="easyui-validatebox" id="psw" name="psw" data-options="required:true">
					<font color="red">*</font>
					</td>
				</tr>
				<tr>
					<td>邮箱:</td>
					<td>
					<input class="easyui-validatebox" id="mail" name="mail" data-options="validType:'email'">
					</td>
				</tr>
				<tr>
					<td>电话:</td>
					<td>
					<input class="easyui-validatebox" id="phone" name="phone" data-options="">
					</td>
				</tr>
			</table>
		</form>
	</div>
	<div id="bb">
		<a href="#" class="easyui-linkbutton" onclick="save()">保存</a>
		<a href="#" class="easyui-linkbutton" onclick="closeEdit('editDialog')">关闭</a>
	</div>
	</shiro:hasPermission>
	<shiro:hasPermission name="/user/right">
	<!-- 用户授与角色 DIALOG ###################################################################### -->
	<div id="userRight" class="easyui-dialog" data-options="buttons:'#right_bb',closed:true" style="padding: 5px;">
		<form id="right_form" action="#">
			<input type="hidden" id="userId">
			<table  cellpadding="0" cellspacing="0" width="330px;">
				<tr><td><h5>角色列表</h5></td><td><h5>操作</h5></td><td><h5>已有角色权限</h5></td></tr>
				<tr>
					<td style="width: 40%">
						<select name="listLeft" id="listLeft" size="10" style="width:100%"
						multiple="multiple" ondblclick="removeOne(listLeftnode,listRightnode);">
						</select>
					</td>
					<td style="width: 20%">
						<div align="center">
							<input type="button" name="allRightMove" id="allRightMove" class="easyui-linkbutton"
								value=" >> " onclick="removeAll(listLeftnode,listRightnode);" /><br />
							<input type="button" name="rightMove" id="rightMove" value="  > "
								onclick="removeOne(listLeftnode,listRightnode);" /><br /> 
							<input type="button" name="leftMove" id="leftMove" value="  < "
								disabled="disabled" onclick="removeOne(listRightnode,listLeftnode);" /><br /> 
							<input type="button" name="allLeftMove" id="allLeftMove" value=" << "
								disabled="disabled" onclick="removeAll(listRightnode,listLeftnode);" />
						</div>
					</td>
					<td style="width: 40%"><select name="listRight" size="10" multiple="multiple" style="width:100%"
						id="listRight" ondblclick="removeOne(listRightnode,listLeftnode);">
					</select></td>
				</tr>
			</table>
			<script type="text/javascript">
				var listLeftnode = document.getElementById("listLeft");
				var listRightnode = document.getElementById("listRight");
				var btallRightMove = document.getElementById("allRightMove");
				var btRightMove = document.getElementById("rightMove");
				var btLeftMove = document.getElementById("leftMove");
				var btallLeftMove = document.getElementById("allLeftMove");

				function isEmpty() {
					if (listLeftnode.options.length < 1) {
						btallRightMove.setAttribute("disabled", "disabled");
						btRightMove.setAttribute("disabled", "disabled");
					} else {
						btallRightMove.removeAttribute("disabled");
						btRightMove.removeAttribute("disabled");
					}
					if (listRightnode.options.length < 1) {
						btallLeftMove.setAttribute("disabled", "disabled");
						btLeftMove.setAttribute("disabled", "disabled");
					} else {
						btallLeftMove.removeAttribute("disabled");
						btLeftMove.removeAttribute("disabled");
					}
				}

				function removeOne(beginList, endList) {
					var flag = false;
					for (i = beginList.options.length - 1; i >= 0; i--) {
						if (beginList.options[i].selected) {
							flag = true;
							var tempOption = beginList.options[i];
							beginList.remove(i);
							endList.add(tempOption, endList.last);
						}
					}
					/*if (!flag) {
						alert("您没有选择，不能移动！！");
					}*/
					isEmpty();

				}

				function removeAll(beginList, endList) {
					for (i = beginList.options.length - 1; i >= 0; i--) {
						var tempOption = beginList.options[i];
						beginList.remove(i);
						endList.add(tempOption, endList.first);
					}
					isEmpty();
				}
			</script>
		</form>
	</div>
	<div id="right_bb">
	<shiro:hasPermission name="/user/right/save">
		<a href="#" class="easyui-linkbutton" onclick="right_save()">保存</a>
	</shiro:hasPermission>
		<a href="#" class="easyui-linkbutton" onclick="closeEdit('userRight')">关闭</a>
	</div>
	</shiro:hasPermission>
	
	<!-- 重置密码 DIALOG ###################################################################### -->
	<div id="pswDialog" class="easyui-dialog" data-options="buttons:'#psw_bb',closed:true" style="padding: 5px;">
		<form id="psw_form" action="#">
			<input type="hidden" id="psw_id" name="pswId"/>
			<table>
				<tr>
					<td>密码:</td>
					<td>
					<input type="password" class="easyui-validatebox" id="re_psw" name="rePsw" data-options="required:true">
					<font color="red">*</font>
					</td>
				</tr>
				<tr>
					<td>重新输入:</td>
					<td>
					<input type="password" class="easyui-validatebox" id="re_psw_confirm" data-options="required:true">
					<font color="red">*</font>
					</td>
				</tr>
			</table>
		</form>
	</div>
	<div id="psw_bb">
		<a href="#" class="easyui-linkbutton" onclick="save_psw()">保存</a>
		<a href="#" class="easyui-linkbutton" onclick="closeDialog('pswDialog')">关闭</a>
	</div>
	</shiro:hasPermission>
</body>
</html>